import React, { useRef } from 'react';
import {
  View, Text, TouchableOpacity, StyleSheet
} from 'react-native';
import moment from 'moment';
import { Dialog, Tip } from 'beeshell';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import { colors, sizes } from '../constants/theme';
import Http from '../service/http';
import requestCheck from '../utils/RequestCheckUtil';


const renderType = (type) => (
  <FontAwesome5
    name={type === 'auto' ? 'robot' : 'user'}
    size={17}
    color={type === 'auto' ? 'green' : colors.secondary}
  />
);

export default function TaskItem({
  item, ecnType, type, instanceId, refresh, setRefresh
}) {
  const {
    startTime, endTime, historyTime, processName, processId, taskId
  } = item;

  const dialog = useRef(null);

  const handlePress = () => {
    if (ecnType === 'manual' && (type === '0' || type === '1')) {
      dialog.current.open();
    }
  };

  const startTask = async () => {
    const res = await Http.startTask({
      instanceId,
      processId,
      taskId
    });
    const callback = () => {
      Tip.show('成功开始');
      setRefresh(refresh + 1);
    };
    requestCheck(res, callback);
  };

  const endTask = async () => {
    const res = await Http.endTask({
      instanceId,
      processId,
      taskId
    });
    const callback = () => {
      Tip.show('成功结束');
      setRefresh(refresh + 1);
    };
    requestCheck(res, callback);
  };

  return (
    <>
      <TouchableOpacity onPress={() => { handlePress(); }}>
        <View style={styles.processItem}>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <Text style={{
              fontSize: 17,
              marginBottom: sizes.sperate,
            }}
            >
              {`流程: ${processName}`}
            </Text>
            {renderType(ecnType)}
          </View>
          <View>
            <Text style={{ marginBottom: sizes.sperate }}>
            发布时间：
              {moment(historyTime).format('MM月DD日')}
            </Text>
            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
              {
              startTime ? (
                <Text>
                  开始时间：
                  {moment(startTime).fromNow()}
                </Text>
              ) : null
            }
              {
              endTime ? (
                <Text>
                  结束时间：
                  {moment(endTime).fromNow()}
                </Text>
              ) : null
            }
            </View>
          </View>
        </View>
      </TouchableOpacity>
      <Dialog
        ref={dialog}
        header={(
          <View style={{ flexDirection: 'row', justifyContent: 'center', marginVertical: 10 }}>
            <Text bold size={16}>
             操作
            </Text>
          </View>
        )}
        body={(
          <View style={{ marginVertical: 20 }}>
            <Text style={{ textAlign: 'center', fontSize: 16 }}>
              {type === '0' ? '是否开始该任务？' : '是否结束该任务？'}
            </Text>
          </View>
        )}
        cancelable
        confirmCallback={
          type === '0' ? () => { startTask(); } : () => { endTask(); }
        }
        confirmLabelText={type === '0' ? '开始' : '结束'}
      />
    </>
  );
}

const styles = StyleSheet.create({
  processItem: {
    backgroundColor: 'white',
    padding: 10,
    marginHorizontal: 5,
    marginVertical: 3,
    borderColor: colors.gray3,
    borderWidth: 0.5,
    borderRadius: 2,
    shadowColor: colors.gray,
    shadowOffset: { width: 0.5, height: 0.5 },
    shadowOpacity: 0.4,
    shadowRadius: 1,
    elevation: 2
  },
});
